<template>
    <div>
        <a-form :form="form" id="update-form">
            <div class="header">
                <h3>一、基本信息</h3>
                <div class="operate">
                    <div v-if="user_id == data.finance_id">
                        <a-button type="primary" v-if="disabled" @click="edit">修改</a-button>
                        <span v-else>
                        <a-button type="primary" @click="returned" >还原默认</a-button>
                        <a-button type="primary" @click="onSubmit">保存修改</a-button></span>
                    </div>
                </div>
            </div>
            <div class="form-main-content">
                <a-row :gutter="10">
                    <a-col :key="0" :span="8" class="form-item">
                        <a-form-item label="账目编号">
                            {{data.sn}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="1" :span="8" class="form-item">
                        <a-form-item label="服务号名称">
                            {{data.service_name}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="2" :span="8" class="form-item">
                        <a-form-item label="服务号">
                            {{data.service_sn}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="3" :span="8" class="form-item">
                        <a-form-item label="受理账号">
                            {{data.username}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="4" :span="8" class="form-item">
                        <a-form-item label="账目类型">
                            {{data.type}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="5" :span="8" class="form-item">
                        <a-form-item label="相关订单">
                             <router-link :to="'/orders/update/'+data.order_id">{{data.order_sn}}</router-link>
                        </a-form-item>
                    </a-col>
                    <a-col :key="6" :span="8" class="form-item">
                        <a-form-item label="变更前余额">
                            {{data.before_amount}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="7" :span="8" class="form-item">
                        <a-form-item label="账目金额">
                            {{data.amount}}
                        </a-form-item>
                    </a-col>
                    <a-col :key="8" :span="8" class="form-item">
                        <a-form-item label="账目余额">
                            {{data.after_amount}}
                        </a-form-item>
                    </a-col>
                    <a-col key="certificate" :span="24" class="form-item">
                        <a-form-item label="相关凭证">
                            <a-upload
                                    listType="picture-card"
                                    :customRequest="upload"
                                    :beforeUpload="beforeUpload"
                                    :fileList="fileList"
                                    @preview="handlePreview"
                                    :remove="handleChange"
                                    v-decorator="['evidence']"
                                    v-if="!disabled"
                            >
                                <div v-if="fileList.length < 8">
                                    <a-icon :type="loading ? 'loading' : 'plus'"/>
                                    <div class="ant-upload-text">上传</div>
                                </div>
                            </a-upload>
                            <div v-if="disabled && fileList.length >0" class="img-displayed"><img style="width: 86px;height: 86px;"
                                                                         alt=""   v-for="(v,k) in fileList" :key="k" :src="v.url" @click="preview"/>
                            </div>
                            <div v-if="disabled && fileList.length ==0">无</div>
                            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel" centered>
                                <img style="width: 100%" :src="previewImage"/>
                            </a-modal>
                        </a-form-item>
                    </a-col>
                    <a-col :key="9" :span="24" class="form-item">
                        <a-form-item label="备注">
                            <a-textarea
                                    rows="6"
                                    placeholder="请输入备注"
                                    v-decorator="[
                                        'remark',
                                        {
                                            initialValue: data.remark
                                        }
                                    ]" v-if="!disabled"/>
                            <div v-if="disabled">{{data.remark}}</div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </div>
        </a-form>
    </div>
</template>

<script>
    import {getBase64} from "@/utils/ImageBase64";

    export default {
        data() {
            return {
                user_id: this.$store.getters.user_id,
                id: 0,
                form: this.$form.createForm(this),
                previewVisible: false,
                previewImage: '',
                loading: false,
                fileList: [],
                disabled: true,
                data: []
            }
        },

        methods: {
            onSubmit(form) {
                this.form.validateFields((err, values) => {
                    if (!err) {
                        /*if (this.fileList.length < 1) {
                            this.$message.error('请上传相关凭证', 1);
                            return;
                        }*/
                        if (this.fileList.length  >0) {
                            let evidence = [];
                            this.fileList.map(m => {
                                evidence.push(m.name)
                            });
                            values.evidence = evidence
                        }
                        this.postData(values).then(res => {
                            if (res.id) {
                                this.$message.success(res.msg, 1);
                                this.data = {...this.data, ...values};
                                this.disabled = true;
                            } else {
                                this.$message.error(res.msg, 1);
                            }
                        })
                    }
                })
            },
            async postData(param) {
                return await this.http('put', 'point/update?id=' + this.id, param);
            },
            handleCancel() {
                this.previewVisible = false
            },
            handleChange() {
                this.fileList = this.fileList.filter(item => {
                    return item.status !== 'removed'
                });
            },
            handlePreview(file) {
                this.previewImage = file.url || file.thumbUrl;
                this.previewVisible = true
            },
            edit() {
                this.disabled = false;
            },
            returned() {
                /*let setData = {
                    evidence: data.evidence,
                    remark: data.remark
                };
                this.form.setFieldsValue(setData)*/
                this.form.setFieldsValue({remark:this.data.remark})
                this.fileList = this.data.evidence;
            },
            beforeUpload(file) {
                const typeB = file.type == "image/jpeg" || file.type == "image/png";
                if (!typeB) {
                    this.$message.error("请选择jpg,png格式的图片", 1);
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$message.error("图片大小必须小于2MB!", 1);
                }
                return typeB && isLt2M;
            },
            upload(file) {
                getBase64(file.file, base64 => {
                    this.http("post", "upload/upload", {image: base64}).then(res => {
                        this.fileList.push({uid: this.fileList.length + 1, name: res.url, url: res.imgurl});
                        this.loading = false;
                    });
                });
            },
            async getDetail(id) {
                return await this.http('get', 'point/view', {id: id});
            },
            preview(e) {
                this.previewVisible = true;
                this.previewImage =  e.currentTarget.src;

            }
        },
        mounted() {
            this.id = this.$route.params.id;
            this.getDetail(this.id).then(res => {
                this.data = res;
                if(res.evidence.length >0){
                    res.evidence.map(item=>{
                       this.fileList.push(item) 
                    })
                    
                }
            })
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../assets/scss/mixin";

    .header {
        @include fj();
        margin-bottom: 30px;

        .operate {
            & > div {
                .ant-btn + .ant-btn {
                    margin-left: 40px;
                }
            }
        }
    }

    .img-displayed {
        img + img {
            margin-left: 20px;
        }
    }
</style>
